import React, { useState } from 'react'
import HomePageBottom from '../../componen/HomePageBottom'
import NavTop from '../../componen/NavTop'

import '../../scss/use/personal.scss'
import ThemeContext from '../public/ThemContext'

import Goods from './Goods'
import Ideal from './Ideal'
import Like from './Like'
import Works from './Works'
export default function Home() {

  let avatar = sessionStorage.getItem('avatar') as string
  let nickname = sessionStorage.getItem('nickname') as string
  let selfinTroduction = sessionStorage.getItem('selfinTroduction') as string


  const [operate, setOperate] = useState<string>('作品')
  //点击修改对应的值
  function changePage(mypage: string) {
    setOperate(mypage);
  }

  return (
    <ThemeContext.Provider value={{ operate, setOperate }} >
      <header className="App-header">
        <NavTop />
        {/* <button onClick={Tologin}>登录</button>
                    <button onClick={Toregister}>注册</button>
                    <button onClick={ToPersonal}>个人资料</button> */}
      </header>
      <div className='persoan'>
        <div className="top">
          <div className="personInfo">
            <div className="avatar">
              <img src={avatar} alt="" />
            </div>
            <div className="name">
              {nickname}
            </div>
            <div className="popular">
              <a href="">
                <span>0</span>关注
              </a>|
              <a href="">
                <span>0</span> 追随者
              </a>|
              <a href="">
                <span>0</span>  人气值
              </a>
            </div>
            <div className='popularTok'>
              <span>{(selfinTroduction) === "null" ? '该用户很懒没有设置个性签名' : selfinTroduction}</span>
            </div>
          </div>
          <div className="userNav">
            <div className="list">
              <span onClick={changePage.bind(null, "作品")}>作品</span>
              <span onClick={changePage.bind(null, "商品")}>商品</span>
              <span onClick={changePage.bind(null, "上架审核")}>上架审核</span>
              <span onClick={changePage.bind(null, "喜欢")}>喜欢</span>
              <span onClick={changePage.bind(null, "灵感集")}>灵感集</span>
              <span onClick={changePage.bind(null, "标签")}>标签</span>
            </div>
          </div>
        </div>
        <div className="buttom">
          <div className="Works">
            <Works />
          </div>
          <div className="Goods">
            <Goods />
          </div>
          <div className='Ideal'>
            <Ideal />
          </div>
          <div className="Like">
            <Like />
          </div>
        </div>
        <HomePageBottom />
      </div>
    </ThemeContext.Provider>
  )
}
